<template>
  <div class="app-container">
    <div>
      <input type="text" v-model="text">
      <button @click="addHandler">添加</button>
    </div>

    <todo-list :list="todoItemList" @delete="deleteHandler">
      <template v-slot:subTitle="scope">
        第{{ scope.index + 1 }}个
      </template>
    </todo-list>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import TodoList, { TodoItemData } from '@/components/TodoList'

@Component({
  components: {
    TodoList,
  },
})
export default class TodoListPage extends Vue {
  public text = '';

  public list: string[] = []

  get todoItemList(): TodoItemData[] {
    return this.list.map(text => ({
      label: text,
    }))
  }

  public addHandler() {
    if (this.text.trim()) {
      this.list.push(this.text)
      this.text = ''
    }
  }

  public deleteHandler(row: TodoItemData, index: number) {
    this.list.splice(index, 1)
  }

  @Watch('list.length', { immediate: true, deep: true })
  public onListChanged(newValue: number, oldValue: number) {
    console.log('list长度发生改变')
    console.log('新长度：' + newValue)
    console.log('旧长度：' + oldValue)
  }

  created() {
    console.log('')
    console.log('TodoList 页面 created')
  }

  beforeMount() {
    console.log('')
    console.log('TodoList 页面 beforeMount')
  }

  mounted() {
    console.log('')
    console.log('TodoList 页面 mounted')
  }

  beforeUpdate() {
    console.log('')
    console.log('TodoList 页面 beforeUpdate')
  }

  updated() {
    console.log('')
    console.log('TodoList 页面 updated')
  }

  beforeDestroy() {
    console.log('')
    console.log('TodoList 页面 beforeDestroy')
  }

  activated() {
    console.log('')
    console.log('TodoList 页面 activated')
  }

  deactivated() {
    console.log('')
    console.log('TodoList 页面 deactivated')
  }
}
</script>

<style>
  .list {
    width: 200px;
    margin: 20px auto;
    text-align: left;
  }
</style>
